<template>
  <el-form
    :model="formModel"
    :inline="formInline"
    :rules="rules"
    :disabled="disabled"
    class="ax-form"
    ref="elForm"
    @submit.native.prevent
  >
    <template v-for="(item, index) in formNode">
      <el-form-item
        v-if="!item.state"
        v-show="!item.show"
        :key="`${item.prop ? item.prop + index : index}`"
        :label="item.label"
        :class="item.labelClass ? item.labelClass : ''"
        :labelWidth="item.labelWidth || '90px'"
        :style="`${'width:' + (item.width || '200px')}`"
        :prop="item.prop"
      >
        <component
          v-for="(ite, ind) in item.formComponents"
          :key="ind"
          :formModel="formModel"
          :modelName="ite.modelName"
          :placeholder="ite.placeholder"
          :item="ite"
          :options="ite.options"
          :is="ite.type"
          :params="ite.params"
          :change-on-select="ite.changeOnSelect"
          :remote-method="ite.remoteMethod"
          :click="
            () => {
              ite.clickFun && ite.clickFun();
            }
          "
          :change="
            (val) => {
              ite.change && ite.change(val);
            }
          "
          :focus="
            () => {
              ite.focus && ite.focus();
            }
          "
          :blur="
            () => {
              ite.blur && ite.blur();
            }
          "
          :keydown="
            (event) => {
              ite.keydown && ite.keydown(event);
              return false;
            }
          "
        ></component>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
export default {
  name: "Form",
  props: ["formNode", "formModel", "formInline", "disabled", "rules"],
  components: {
    Public: () => import("./lib/Public"),
    Select: () => import("./lib/Select"),
  },
  methods: {},
};
</script>

<style lang="scss">
@import "./Form.scss";
</style>
